<template>
  <header id="main-header">
    <div class="clearfix">
      <div class="float-left">
        <a href="index.html" class="clearfix" id="main-link">
          <div class="float-left"><i class="lni lni-user"></i></div>
          <div class="float-left header-box">
            <div id="my-name" class="overflow-h-ellipsis">
              {{ user.name }} 😜
            </div>
            <!-- <div class="text">{{ user.signature }}</div> -->
          </div>
        </a>
      </div>
      <div class="float-right">
        <span id="video-btn" class="know-more-section-btn">
          <span class="pointer"> <i class="lni lni-menu"></i> </span>
        </span>
      </div>
    </div>
  </header>
  <main>
    <div id="main-container">
      <div class="window" id="about">
        <div class="window-header">
          <div class="window-title">关于我</div>
          <div class="clearfix float-right window-header-btns">
            <div class="float-left pointer window-header-btn window-expand-btn">
              <i class="lni lni-frame-expand"></i>
            </div>
            <div class="float-left pointer window-header-btn window-close-btn">
              <a href="#"><i class="lni lni-close"></i></a>
            </div>
          </div>
        </div>
        <div class="window-body backdrop" data-simplebar>
          <div class="window-content">
            <div id="my-photo">
              <!-- <img
                class="top"
                src="@/assets/img/my-photo/top.png"
                alt="John Doe"
              /> -->
              <img class="tips" :src="user.avatar" alt="John Doe" />
            </div>
            <div id="intro-line">
              {{ user.name }}
            </div>
            <div class="sig">{{ sig.join("") }}</div>
            <div id="intro-secondary-line">{{ user.job }}</div>
            <p style="font-size: 14px" id="about-me-lines">
              {{ user.description }}
            </p>
            <div id="doc-link">
              <a :href="user.resumePdf" download>
                <i class="lni lni-download"></i> <span>下载我的简历</span>
              </a>
            </div>
            <div id="freelance">
              <span
                >很 高 兴 与 您 认 识 <a href="#contact"> Contact me</a></span
              >
            </div>
          </div>
        </div>
      </div>
      <div class="window" id="skills">
        <div class="window-header">
          <div class="window-title">技能</div>
          <div class="clearfix float-right window-header-btns">
            <div class="float-left pointer window-header-btn window-expand-btn">
              <i class="lni lni-frame-expand"></i>
            </div>
            <div class="float-left pointer window-header-btn window-close-btn">
              <a href="#"><i class="lni lni-close"></i></a>
            </div>
          </div>
        </div>
        <div class="window-body backdrop" data-simplebar>
          <div class="window-content">
            <div class="skill" v-for="(skill, index) in skills" :key="index">
              <div class="skill-info">
                <div class="skill-name">{{ skill }}</div>
                <!-- <div class="skill-exp">5+ Years exp</div> -->
              </div>
              <div class="skill-meter" style="width: 100%">
                <!-- <span>96%</span> -->
              </div>
            </div>
            <!-- <div class="skill">
              <div class="skill-info">
                <div class="skill-name">CSS3</div>
                <div class="skill-exp">5+ Years exp</div>
              </div>
              <div class="skill-meter" style="width: 94%">
                <span>94%</span>
              </div>
            </div>
            <div class="skill">
              <div class="skill-info">
                <div class="skill-name">JavaScript</div>
                <div class="skill-exp">4+ Years exp</div>
              </div>
              <div class="skill-meter" style="width: 86%">
                <span>86%</span>
              </div>
            </div>
            <div class="skill">
              <div class="skill-info">
                <div class="skill-name">jQuery</div>
                <div class="skill-exp">4+ Years exp</div>
              </div>
              <div class="skill-meter" style="width: 90%">
                <span>90%</span>
              </div>
            </div>
            <div class="skill">
              <div class="skill-info">
                <div class="skill-name">SEO</div>
                <div class="skill-exp">3+ Years exp</div>
              </div>
              <div class="skill-meter" style="width: 80%">
                <span>80%</span>
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="window" id="education">
        <div class="window-header">
          <div class="window-title">教育</div>
          <div class="clearfix float-right window-header-btns">
            <div class="float-left pointer window-header-btn window-expand-btn">
              <i class="lni lni-frame-expand"></i>
            </div>
            <div class="float-left pointer window-header-btn window-close-btn">
              <a href="#"><i class="lni lni-close"></i></a>
            </div>
          </div>
        </div>
        <div class="window-body backdrop" data-simplebar>
          <div class="window-content">
            <div class="education" v-for="(edu, index) in edus" :key="index">
              <div class="edu-name">{{ edu.school.split("-")[1] }}</div>
              <div class="edu-major">{{ edu.study }}</div>
              <div class="edu-duration">{{ edu.start + " - " + edu.end }}</div>
              <div class="edu-institute">{{ edu.school.split("-")[0] }}</div>
            </div>
            <!-- <div class="education">
              <div class="edu-name">M.Tech</div>
              <div class="edu-major">Information technology</div>
              <div class="edu-duration">2017-2019</div>
              <div class="edu-institute">Oxford University</div>
            </div>
            <div class="education">
              <div class="edu-name">B.Tech</div>
              <div class="edu-major">Information technology</div>
              <div class="edu-duration">2017-2019</div>
              <div class="edu-institute">Oxford University</div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="window" id="experience">
        <div class="window-header">
          <div class="window-title">经历</div>
          <div class="clearfix float-right window-header-btns">
            <div class="float-left pointer window-header-btn window-expand-btn">
              <i class="lni lni-frame-expand"></i>
            </div>
            <div class="float-left pointer window-header-btn window-close-btn">
              <a href="#"><i class="lni lni-close"></i></a>
            </div>
          </div>
        </div>
        <div class="window-body backdrop" data-simplebar>
          <div class="window-content">
            <div class="experience" v-for="(ex, index) in works" :key="index">
              <div class="exp-name">{{ ex.job }}</div>
              <div class="exp-duration">{{ ex.start }} 至 {{ ex.end }}</div>
              <div class="exp-company">{{ ex.company }}</div>
              <div class="exp-jd">
                {{ ex.description }}
              </div>
              <div @click="jump(user.id)" class="to-project">
                <span>干了啥呢</span>

                <svg
                  t="1622893993815"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="10056"
                  width="32"
                  height="32"
                >
                  <path
                    d="M106.951359 476.000088c23.394826 0 42.358737 18.96391 42.358737 42.35976 0 23.390733-18.96391 42.357713-42.358737 42.357713s-42.358737-18.96698-42.358737-42.357713C64.592622 494.963998 83.556533 476.000088 106.951359 476.000088zM274.258852 476.000088c23.394826 0 42.35976 18.96391 42.35976 42.35976 0 23.390733-18.964934 42.357713-42.35976 42.357713s-42.358737-18.96698-42.358737-42.357713C231.900116 494.963998 250.864026 476.000088 274.258852 476.000088zM441.566346 476.000088c23.394826 0 42.358737 18.96391 42.358737 42.35976 0 23.390733-18.96391 42.357713-42.358737 42.357713s-42.35976-18.96698-42.35976-42.357713C399.207609 494.963998 418.17152 476.000088 441.566346 476.000088zM608.874863 476.000088c23.393803 0 42.35976 18.96391 42.35976 42.35976 0 23.390733-18.964934 42.357713-42.35976 42.357713s-42.35976-18.96698-42.35976-42.357713C566.515103 494.963998 585.480037 476.000088 608.874863 476.000088zM952.288237 489.278509 688.470689 225.459938c-12.095479-12.089339-35.304064-8.487302-51.842739 8.057513-16.537651 16.538675-20.148899 39.753399-8.05649 51.845809l226.63981 226.641857L628.5776 738.641857c-12.092409 12.087293-8.481162 35.310204 8.05649 51.839669 16.538675 16.540721 39.747259 20.146852 51.842739 8.065699l263.817548-263.820618c5.715165-5.708002 7.880481-13.919011 6.875594-22.721491C960.168718 503.201613 958.003402 494.998791 952.288237 489.278509z"
                    p-id="10057"
                    fill="#ffffff"
                  ></path>
                </svg>
              </div>
            </div>
            <!-- <div class="experience">
              <div class="exp-name">Web designer</div>
              <div class="exp-duration">2017-2019</div>
              <div class="exp-company">Google</div>
              <div class="exp-jd">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </div>
            </div>
            <div class="experience">
              <div class="exp-name">Front-end engineer</div>
              <div class="exp-duration">2017-2019</div>
              <div class="exp-company">Samsung</div>
              <div class="exp-jd">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </div>
            </div>
            <div class="experience">
              <div class="exp-name">UI developer</div>
              <div class="exp-duration">2017-2019</div>
              <div class="exp-company">Twitter</div>
              <div class="exp-jd">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </div>
            </div> -->
          </div>
        </div>
      </div>
      <div class="window" id="services">
        <div class="window-header">
          <div class="window-title">Services</div>
          <div class="clearfix float-right window-header-btns">
            <div class="float-left pointer window-header-btn window-expand-btn">
              <i class="lni lni-frame-expand"></i>
            </div>
            <div class="float-left pointer window-header-btn window-close-btn">
              <a href="#"><i class="lni lni-close"></i></a>
            </div>
          </div>
        </div>
        <div class="window-body backdrop" data-simplebar>
          <div class="window-content">
            <div id="services-body">
              <div class="clearfix" id="services-body-inner">
                <div class="float-left service">
                  <div class="service-body">
                    <div class="service-icon">
                      <i class="lni lni-code-alt"></i>
                    </div>
                    <div class="service-name">Web design</div>
                    <div class="service-description line-clamp">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                      ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                  </div>
                </div>
                <div class="float-left service">
                  <div class="service-body">
                    <div class="service-icon">
                      <i class="lni lni-brush-alt"></i>
                    </div>
                    <div class="service-name">Logo design</div>
                    <div class="service-description line-clamp">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                      ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                  </div>
                </div>
                <div class="float-left service">
                  <div class="service-body">
                    <div class="service-icon">
                      <i class="lni lni-pie-chart"></i>
                    </div>
                    <div class="service-name">SEO</div>
                    <div class="service-description line-clamp">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                      ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                  </div>
                </div>
                <div class="float-left service">
                  <div class="service-body">
                    <div class="service-icon">
                      <i class="lni lni-target-customer"></i>
                    </div>
                    <div class="service-name">Digital marketing</div>
                    <div class="service-description line-clamp">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                      ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                  </div>
                </div>
                <div class="float-left service">
                  <div class="service-body">
                    <div class="service-icon">
                      <i class="lni lni-video"></i>
                    </div>
                    <div class="service-name">Video editing</div>
                    <div class="service-description line-clamp">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                      ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                  </div>
                </div>
                <div class="float-left service">
                  <div class="service-body">
                    <div class="service-icon">
                      <i class="lni lni-gallery"></i>
                    </div>
                    <div class="service-name">Image editing</div>
                    <div class="service-description line-clamp">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                      ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div id="service-plans">
              <div id="plans-heading">Select your plan</div>
              <div class="clearfix" id="service-plans-body">
                <div class="float-left service-plan">
                  <div class="service-plan-body">
                    <div class="service-plan-name">Starter</div>
                    <div class="service-plan-price">5.99$ / month</div>
                    <div class="service-plan-features">
                      <div class="plan-feature">
                        30 days money back guarantee
                      </div>
                      <div class="plan-feature">Email support</div>
                      <div class="plan-feature">2 PSD to HTML</div>
                      <div class="plan-feature">1 website design</div>
                      <div class="plan-feature">2 code revisions</div>
                      <div class="plan-feature">1 website SEO project</div>
                      <div class="plan-feature">1 video editing project</div>
                      <div class="plan-feature">30 image editing</div>
                    </div>
                    <a class="plan-link gradient-1" href="#"
                      >Go starter<i class="lni lni-chevron-right"></i
                    ></a>
                  </div>
                </div>
                <div class="float-left service-plan">
                  <div class="service-plan-body">
                    <div class="service-plan-name">Super</div>
                    <div class="service-plan-price">8.99$ / month</div>
                    <div class="service-plan-features">
                      <div class="plan-feature">
                        30 days money back guarantee
                      </div>
                      <div class="plan-feature">
                        Email and telephone support
                      </div>
                      <div class="plan-feature">12 PSD to HTML</div>
                      <div class="plan-feature">5 website design</div>
                      <div class="plan-feature">5 code revisions</div>
                      <div class="plan-feature">5 website SEO projects</div>
                      <div class="plan-feature">5 video editing projects</div>
                      <div class="plan-feature">80 image editing</div>
                    </div>
                    <a class="plan-link gradient-5" href="#"
                      >Go super<i class="lni lni-chevron-right"></i
                    ></a>
                  </div>
                </div>
                <div class="float-left service-plan">
                  <div class="service-plan-body">
                    <div class="service-plan-name">Pro</div>
                    <div class="service-plan-price">12.99$ / month</div>
                    <div class="service-plan-features">
                      <div class="plan-feature">
                        30 days money back guarantee
                      </div>
                      <div class="plan-feature">
                        Email, telephone, skype support
                      </div>
                      <div class="plan-feature">20 PSD to HTML</div>
                      <div class="plan-feature">20 website design</div>
                      <div class="plan-feature">20 code revisions</div>
                      <div class="plan-feature">10 website SEO projects</div>
                      <div class="plan-feature">10 video editing projects</div>
                      <div class="plan-feature">500 image editing</div>
                    </div>
                    <a class="plan-link gradient-10" href="#"
                      >Go pro<i class="lni lni-chevron-right"></i
                    ></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="window" id="blog">
        <div class="window-header">
          <div class="window-title">Blog</div>
          <div class="clearfix float-right window-header-btns">
            <div class="float-left pointer window-header-btn window-expand-btn">
              <i class="lni lni-frame-expand"></i>
            </div>
            <div class="float-left pointer window-header-btn window-close-btn">
              <a href="#"><i class="lni lni-close"></i></a>
            </div>
          </div>
        </div>
        <div class="window-body backdrop" data-simplebar>
          <div class="window-content">
            <div id="latest-blog-post-cover">
              <div class="blog-heading">Latest post</div>
              <div id="latest-blog-post">
                <div id="latest-blog-post-text">
                  <div id="latest-blog-post-heading">
                    Best trip plan for visiting gorgeous places in Canada during
                    winter season
                  </div>
                  <a href="#" id="latest-blog-post-link"
                    >Read<i class="lni lni-arrow-right"></i
                  ></a>
                </div>
              </div>
            </div>
            <div id="popular-blog-post-cover">
              <div class="blog-heading">Popular posts</div>
              <div class="clearfix">
                <div class="float-left popular-blog-post-col">
                  <a href="#" class="popular-blog-post">
                    <div class="popular-post-thumbnail">
                      <img
                        src="@/assets/img/blog/blog-7.jpg"
                        alt="Guidelines to become a power elite author on Themeforest"
                      />
                    </div>
                    <div class="popular-post-title line-clamp">
                      Guidelines to become a power elite author on Themeforest
                    </div>
                  </a>
                </div>
                <div class="float-left popular-blog-post-col">
                  <a href="#" class="popular-blog-post">
                    <div class="popular-post-thumbnail">
                      <img
                        src="@/assets/img/blog/blog-8.jpg"
                        alt="Blog post thumbnail"
                      />
                    </div>
                    <div class="popular-post-title line-clamp">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua.
                    </div>
                  </a>
                </div>
                <div class="float-left popular-blog-post-col">
                  <a href="#" class="popular-blog-post">
                    <div class="popular-post-thumbnail">
                      <img
                        src="@/assets/img/blog/blog-9.jpg"
                        alt="Blog post thumbnail"
                      />
                    </div>
                    <div class="popular-post-title line-clamp">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua.
                    </div>
                  </a>
                </div>
                <div class="float-left popular-blog-post-col">
                  <a href="#" class="popular-blog-post">
                    <div class="popular-post-thumbnail">
                      <img
                        src="@/assets/img/blog/blog-10.jpg"
                        alt="Blog post thumbnail"
                      />
                    </div>
                    <div class="popular-post-title line-clamp">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua.
                    </div>
                  </a>
                </div>
                <div class="float-left popular-blog-post-col">
                  <a href="#" class="popular-blog-post">
                    <div class="popular-post-thumbnail">
                      <img
                        src="@/assets/img/blog/blog-11.jpg"
                        alt="Blog post thumbnail"
                      />
                    </div>
                    <div class="popular-post-title line-clamp">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua.
                    </div>
                  </a>
                </div>
                <div class="float-left popular-blog-post-col">
                  <a href="#" class="popular-blog-post">
                    <div class="popular-post-thumbnail">
                      <img
                        src="@/assets/img/blog/blog-12.jpg"
                        alt="Blog post thumbnail"
                      />
                    </div>
                    <div class="popular-post-title line-clamp">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua.
                    </div>
                  </a>
                </div>
              </div>
            </div>
            <div class="clearfix" id="blog-body">
              <div class="blog-heading">Other awesome posts</div>
              <div class="float-left blog-post-col">
                <a href="#" class="blog-post">
                  <div class="blog-post-thumbnail">
                    <img
                      src="@/assets/img/blog/blog-1.jpg"
                      alt="10 dishes that you must try at home"
                    />
                  </div>
                  <div class="blog-post-title line-clamp">
                    10 dishes that you must try at home
                  </div>
                  <div class="blog-post-excerpt line-clamp">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                    do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </a>
              </div>
              <div class="float-left blog-post-col">
                <a href="#" class="blog-post">
                  <div class="blog-post-thumbnail">
                    <img
                      src="@/assets/img/blog/blog-2.jpg"
                      alt="Things that you should know before visiting Switzerland"
                    />
                  </div>
                  <div class="blog-post-title line-clamp">
                    Things that you should know before visiting Switzerland
                  </div>
                  <div class="blog-post-excerpt line-clamp">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                    do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </a>
              </div>
              <div class="float-left blog-post-col">
                <a href="#" class="blog-post">
                  <div class="blog-post-thumbnail">
                    <img
                      src="@/assets/img/blog/blog-3.jpg"
                      alt="How to make travelling a full-time job?"
                    />
                  </div>
                  <div class="blog-post-title line-clamp">
                    How to make travelling a full-time job?
                  </div>
                  <div class="blog-post-excerpt line-clamp">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                    do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </a>
              </div>
              <div class="float-left blog-post-col">
                <a href="#" class="blog-post">
                  <div class="blog-post-thumbnail">
                    <img
                      src="@/assets/img/blog/blog-4.jpg"
                      alt="Acoustic guitar tips for beginners"
                    />
                  </div>
                  <div class="blog-post-title line-clamp">
                    Acoustic guitar tips for beginners
                  </div>
                  <div class="blog-post-excerpt line-clamp">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                    do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </a>
              </div>
              <div class="float-left blog-post-col">
                <a href="#" class="blog-post">
                  <div class="blog-post-thumbnail">
                    <img
                      src="@/assets/img/blog/blog-5.jpg"
                      alt="Social media marketing hacks"
                    />
                  </div>
                  <div class="blog-post-title line-clamp">
                    Social media marketing hacks
                  </div>
                  <div class="blog-post-excerpt line-clamp">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                    do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </a>
              </div>
              <div class="float-left blog-post-col">
                <a href="#" class="blog-post">
                  <div class="blog-post-thumbnail">
                    <img
                      src="@/assets/img/blog/blog-6.jpg"
                      alt="Food experiments at home for foodies"
                    />
                  </div>
                  <div class="blog-post-title line-clamp">
                    Food experiments at home for foodies
                  </div>
                  <div class="blog-post-excerpt line-clamp">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                    do eiusmod tempor incididunt ut labore et dolore magna
                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
                  </div>
                </a>
              </div>
            </div>
            <div id="blog-pagination">
              <a href="#" class="active">1</a> <a href="#">2</a>
              <a href="#">3</a> <a href="#">4</a> <a href="#">5</a>
            </div>
          </div>
        </div>
      </div>
      <div class="window" id="portfolio">
        <div class="window-header">
          <div class="window-title">生活</div>
          <div class="clearfix float-right window-header-btns">
            <div class="float-left pointer window-header-btn window-expand-btn">
              <i class="lni lni-frame-expand"></i>
            </div>
            <div class="float-left pointer window-header-btn window-close-btn">
              <a href="#"><i class="lni lni-close"></i></a>
            </div>
          </div>
        </div>
        <div class="window-body backdrop" data-simplebar>
          <div class="window-content">
            <div id="portfolio-tabs">
              <div class="portfolio-tab active" data-filter="*">All</div>
              <div class="portfolio-tab" data-filter=".portfolio-creative">
                Creative
              </div>
              <div class="portfolio-tab" data-filter=".portfolio-design">
                Design
              </div>
              <div class="portfolio-tab" data-filter=".portfolio-minimal">
                Minimal
              </div>
            </div>
            <div id="portfolio-content">
              <div class="clearfix" id="portfolio-body">
                <div
                  class="
                    float-left
                    portfolio-item portfolio-design portfolio-minimal
                  "
                >
                  <a href="https://www.thewebcross.com" target="_blank">
                    <img
                      src="@/assets/img/portfolio/p-1.jpg"
                      alt="Portfolio item"
                    />
                    <div class="portfolio-item-title">
                      <span class="gradient-1"
                        >Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit</span
                      >
                    </div>
                  </a>
                </div>
                <div
                  class="
                    float-left
                    portfolio-item portfolio-creative portfolio-design
                  "
                >
                  <a href="https://www.thewebcross.com" target="_blank">
                    <img
                      src="@/assets/img/portfolio/p-2.jpg"
                      alt="Portfolio item"
                    />
                    <div class="portfolio-item-title">
                      <span class="gradient-2"
                        >Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit</span
                      >
                    </div>
                  </a>
                </div>
                <div
                  class="
                    float-left
                    portfolio-item portfolio-creative portfolio-design
                  "
                >
                  <a href="https://www.thewebcross.com" target="_blank">
                    <img
                      src="@/assets/img/portfolio/p-3.jpg"
                      alt="Portfolio item"
                    />
                    <div class="portfolio-item-title">
                      <span class="gradient-5"
                        >Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit</span
                      >
                    </div>
                  </a>
                </div>
                <div
                  class="
                    float-left
                    portfolio-item portfolio-creative portfolio-minimal
                  "
                >
                  <a href="https://www.thewebcross.com" target="_blank">
                    <img
                      src="@/assets/img/portfolio/p-4.jpg"
                      alt="Portfolio item"
                    />
                    <div class="portfolio-item-title">
                      <span class="gradient-4"
                        >Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit</span
                      >
                    </div>
                  </a>
                </div>
                <div class="float-left portfolio-item portfolio-design">
                  <a href="https://www.thewebcross.com" target="_blank">
                    <img
                      src="@/assets/img/portfolio/p-5.jpg"
                      alt="Portfolio item"
                    />
                    <div class="portfolio-item-title">
                      <span class="gradient-3"
                        >Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit</span
                      >
                    </div>
                  </a>
                </div>
                <div
                  class="
                    float-left
                    portfolio-item portfolio-creative portfolio-minimal
                  "
                >
                  <a href="https://www.thewebcross.com" target="_blank">
                    <img
                      src="@/assets/img/portfolio/p-6.jpg"
                      alt="Portfolio item"
                    />
                    <div class="portfolio-item-title">
                      <span class="gradient-10"
                        >Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit</span
                      >
                    </div>
                  </a>
                </div>
                <div
                  class="
                    float-left
                    portfolio-item portfolio-design portfolio-minimal
                  "
                >
                  <a href="https://www.thewebcross.com" target="_blank">
                    <img
                      src="@/assets/img/portfolio/p-7.jpg"
                      alt="Portfolio item"
                    />
                    <div class="portfolio-item-title">
                      <span class="gradient-6"
                        >Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit</span
                      >
                    </div>
                  </a>
                </div>
                <div
                  class="
                    float-left
                    portfolio-item portfolio-creative portfolio-design
                  "
                >
                  <a href="https://www.thewebcross.com" target="_blank">
                    <img
                      src="@/assets/img/portfolio/p-8.jpg"
                      alt="Portfolio item"
                    />
                    <div class="portfolio-item-title">
                      <span class="gradient-8"
                        >Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit</span
                      >
                    </div>
                  </a>
                </div>
                <div
                  class="
                    float-left
                    portfolio-item portfolio-creative portfolio-design
                  "
                >
                  <a href="https://www.thewebcross.com" target="_blank">
                    <img
                      src="@/assets/img/portfolio/p-9.jpg"
                      alt="Portfolio item"
                    />
                    <div class="portfolio-item-title">
                      <span class="gradient-7"
                        >Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit</span
                      >
                    </div>
                  </a>
                </div>
                <div
                  class="
                    float-left
                    portfolio-item portfolio-creative portfolio-minimal
                  "
                >
                  <a href="https://www.thewebcross.com" target="_blank">
                    <img
                      src="@/assets/img/portfolio/p-10.jpg"
                      alt="Portfolio item"
                    />
                    <div class="portfolio-item-title">
                      <span class="gradient-9"
                        >Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit</span
                      >
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="window" id="clients">
        <div class="window-header">
          <div class="window-title">其他站点</div>
          <div class="clearfix float-right window-header-btns">
            <div class="float-left pointer window-header-btn window-expand-btn">
              <i class="lni lni-frame-expand"></i>
            </div>
            <div class="float-left pointer window-header-btn window-close-btn">
              <a href="#"><i class="lni lni-close"></i></a>
            </div>
          </div>
        </div>
        <div class="window-body backdrop" data-simplebar>
          <div class="window-content">
            <div id="clients-content">
              <div id="clients-section-heading">博客 笔记 等</div>
              <div class="clearfix" id="clients-body">
                <div class="float-left client">
                  <a :href="user.yuque" class="client-logo">
                    <img
                      src="@/assets/img/clients/yuque.svg"
                      alt="Coca Cola"
                    />
                    <div class="client-display-link">
                      {{ user.yuque }}
                    </div>
                  </a>
                </div>
                <div class="float-left client">
                  <a :href="user.github" class="client-logo">
                    <img
                      src="@/assets/img/clients/GitHub.svg"
                      alt="Coca Cola"
                    />
                    <div class="client-display-link">
                      {{ user.github }}
                    </div>
                  </a>
                </div>
                <div class="float-left client">
                  <a :href="user.gitee" class="client-logo">
                    <img
                      src="@/assets/img/clients/gitee.svg"
                      alt="Coca Cola"
                    />
                    <div class="client-display-link">
                      {{ user.gitee }}
                    </div>
                  </a>
                </div>
                <div class="float-left client">
                  <a :href="user.blog" class="client-logo">
                    <img src="@/assets/img/clients/blog.svg" alt="Coca Cola" />
                    <div class="client-display-link">
                      {{ user.blog }}
                    </div>
                  </a>
                </div>
                <!-- <div class="float-left client">
                  <a
                    href="https://envato.com"
                    target="_blank"
                    class="client-logo"
                  >
                    <img src="@/assets/img/clients/envato.svg" alt="Envato" />
                    <div class="client-display-link">https://envato.com</div>
                  </a>
                </div>
                <div class="float-left client">
                  <a
                    href="https://google.com"
                    target="_blank"
                    class="client-logo"
                  >
                    <img src="@/assets/img/clients/google.svg" alt="Google" />
                    <div class="client-display-link">https://google.com</div>
                  </a>
                </div>
                <div class="float-left client">
                  <a
                    href="https://www.mclaren.com"
                    target="_blank"
                    class="client-logo"
                  >
                    <img
                      src="@/assets/img/clients/mclaren.svg"
                      alt="Mclaren"
                    />
                    <div class="client-display-link">
                      https://www.mclaren.com
                    </div>
                  </a>
                </div>
                <div class="float-left client">
                  <a
                    href="https://firebase.google.com"
                    target="_blank"
                    class="client-logo"
                  >
                    <img
                      src="/assets/img/clients/firebase.svg"
                      alt="Firebase"
                    />
                    <div class="client-display-link">
                      https://firebase.google.com
                    </div>
                  </a>
                </div>
                <div class="float-left client">
                  <a
                    href="https://wordpress.com"
                    target="_blank"
                    class="client-logo"
                  >
                    <img
                      src="@/assets/img/clients/wordpress.svg"
                      alt="WordPress"
                    />
                    <div class="client-display-link">https://wordpress.com</div>
                  </a>
                </div>
                <div class="float-left client">
                  <a
                    href="https://spotify.com"
                    target="_blank"
                    class="client-logo"
                  >
                    <img
                      src="@/assets/img/clients/spotify.svg"
                      alt="Spotify"
                    />
                    <div class="client-display-link">https://spotify.com</div>
                  </a>
                </div>
                <div class="float-left client">
                  <a
                    href="https://airbnb.com/"
                    target="_blank"
                    class="client-logo"
                  >
                    <img src="@/assets/img/clients/airbnb.svg" alt="Airbnb" />
                    <div class="client-display-link">http://airbnb.com</div>
                  </a>
                </div>
                <div class="float-left client">
                  <a
                    href="https://www.rolls-royce.com"
                    target="_blank"
                    class="client-logo"
                  >
                    <img
                      src="@/assets/img/clients/rolls-royce.svg"
                      alt="Rolls Royce"
                    />
                    <div class="client-display-link">
                      https://www.rolls-royce.com
                    </div>
                  </a>
                </div>
                <div class="float-left client">
                  <a
                    href="https://www.spacex.com"
                    target="_blank"
                    class="client-logo"
                  >
                    <img src="@/assets/img/clients/spacex.svg" alt="SpaceX" />
                    <div class="client-display-link">
                      https://www.spacex.com
                    </div>
                  </a>
                </div>
                <div class="float-left client">
                  <a
                    href="https://www.zara.com"
                    target="_blank"
                    class="client-logo"
                  >
                    <img src="@/assets/img/clients/zara.svg" alt="Zara" />
                    <div class="client-display-link">https://www.zara.com</div>
                  </a>
                </div>
                <div class="float-left client">
                  <a
                    href="https://www.xbox.com"
                    target="_blank"
                    class="client-logo"
                  >
                    <img src="@/assets/img/clients/xbox.svg" alt="Xbox" />
                    <div class="client-display-link">https://www.xbox.com</div>
                  </a>
                </div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="window" id="testimonials">
        <div class="window-header">
          <div class="window-title">留言板</div>
          <div class="clearfix float-right window-header-btns">
            <div class="float-left pointer window-header-btn window-expand-btn">
              <i class="lni lni-frame-expand"></i>
            </div>
            <div class="float-left pointer window-header-btn window-close-btn">
              <a href="#"><i class="lni lni-close"></i></a>
            </div>
          </div>
        </div>
        <div class="window-body max-height backdrop" data-simplebar>
          <div class="window-content max-height">
            <div class="comment">
              <div class="post-com">
                <div class="form">
                  <div class="form-item">
                    <textarea
                      cols="30"
                      rows="10"
                      placeholder="请输入您的留言"
                      v-model="commentObj.content"
                    ></textarea>
                  </div>
                  <div class="form-item">
                    <input
                      type="text"
                      v-model="commentObj.name"
                      placeholder="您的大名"
                    />
                  </div>
                  <div class="form-item">
                    <button @click="sendComment" class="btn">发表</button>
                  </div>
                </div>
              </div>
              <!-- <a-divider /> -->
              <div class="content">
                <div class="content-item">
                  <div class="title">
                    <img
                      src="https://z3.ax1x.com/2020/12/04/DH5BuR.jpg"
                      alt=""
                    />
                    <span style="margin-right: 10px">刘正星</span>
                    <a-tag
                      style="color: #fff; font-size: 10px; line-height: 15px"
                      color="#87d068"
                      >站主</a-tag
                    >
                  </div>
                  <div class="text">既然来了就占个座吧 ~</div>
                  <div class="time">1998-07-20 13:14:00</div>
                </div>
                <div
                  v-for="(item, index) in comments"
                  :key="'comment-' + index"
                  class="content-item"
                >
                  <div class="title">
                    <img
                      src="https://z3.ax1x.com/2020/12/04/DH5BuR.jpg"
                      alt=""
                    />
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="text">{{ item.content }}</div>
                  <div class="time">{{ item.gmtCreated }}</div>
                </div>
              </div>
            </div>
            <!-- <div class="testimonial max-height flex-center">
              <div class="testimonial-info max-height flex-center gradient-10">
                <div class="testimonial-info-body">
                  <div class="testimonial-photo">
                    <img
                      src="@/assets/img/testimonials/img-1.jpg"
                      alt="Testimonial photo"
                    />
                  </div>
                  <div class="testimonial-person-name">Roxanne</div>
                  <div class="testimonial-person-designation">
                    <span>UX Engineer,</span>
                    <a href="https://www.google.com" target="_blank">
                      <span>@Google</span> <b>Open link</b>
                    </a>
                  </div>
                </div>
              </div>
              <div class="testimonial-text-cover max-height">
                <div class="testimonial-text">
                  <div class="testimonial-text-body">
                    <div class="testimonial-text-content">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                      ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="testimonial max-height flex-center">
              <div class="testimonial-info max-height flex-center gradient-8">
                <div class="testimonial-info-body">
                  <div class="testimonial-photo">
                    <img
                      src="@/assets/img/testimonials/img-2.jpg"
                      alt="John Doe"
                    />
                  </div>
                  <div class="testimonial-person-name">John Doe</div>
                  <div class="testimonial-person-designation">
                    <span>Front-end Engineer,</span>
                    <a href="#"> <span>@Coca Cola</span> <b>Open link</b> </a>
                  </div>
                </div>
              </div>
              <div class="testimonial-text-cover max-height">
                <div class="testimonial-text">
                  <div class="testimonial-text-body">
                    <div class="testimonial-text-content">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                      ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="testimonial max-height flex-center">
              <div class="testimonial-info max-height flex-center gradient-5">
                <div class="testimonial-info-body">
                  <div class="testimonial-photo">
                    <img
                      src="@/assets/img/testimonials/img-3.jpg"
                      alt="Chandler Bing"
                    />
                  </div>
                  <div class="testimonial-person-name">John Doe Jr.</div>
                  <div class="testimonial-person-designation">
                    <span>Aerospace Engineer,</span>
                    <a href="https://www.spacex.com" target="_blank">
                      <span>@SpaceX</span> <b>Open link</b>
                    </a>
                  </div>
                </div>
              </div>
              <div class="testimonial-text-cover max-height">
                <div class="testimonial-text">
                  <div class="testimonial-text-body">
                    <div class="testimonial-text-content">
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                      sed do eiusmod tempor incididunt ut labore et dolore magna
                      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                      ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                  </div>
                </div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div id="contact">
      <div id="contact-body">
        <a
          href="https://themeforest.net/user/thewebcross/portfolio"
          target="_blank"
          class="contact-btn"
        >
          <i class="lni lni-envato"></i>
          <div class="contact-btn-bg gradient-5"></div>
        </a>
        <a href="#" target="_blank" class="contact-btn">
          <i class="lni lni-linkedin-original"></i>
          <div class="contact-btn-bg gradient-10"></div>
        </a>
        <a href="#" target="_blank" class="contact-btn">
          <i class="lni lni-twitter-original"></i>
          <div class="contact-btn-bg gradient-4"></div>
        </a>
        <a href="#" target="_blank" class="contact-btn">
          <i class="lni lni-facebook-original"></i>
          <div class="contact-btn-bg gradient-2"></div>
        </a>
        <div id="contact-email">
          <!-- <a
            href="/cdn-cgi/l/email-protection"
            class="__cf_email__"
            data-cfemail="f3999c9b9ddd979c96b39a9d959cdd909c9e"
            >[email&#160;protected]</a
          > -->
        </div>
        <div class="send-msg">
          <div class="input-item">
            <input type="text" v-model="name" placeholder="Your name" />
          </div>
          <div class="input-item">
            <textarea
              cols="30"
              rows="10"
              placeholder="Message"
              v-model="msg"
            ></textarea>
          </div>
          <div @click="sendMsg" class="send-btn">提 交 信 息</div>
        </div>
        <a href="#" id="contact-close-btn"> <i class="lni lni-close"></i> </a>
      </div>
    </div>
    <nav id="main-nav">
      <div id="main-nav-body">
        <div id="main-nav-tb-container">
          <div id="main-nav-tb" class="container backdrop">
            <div class="row" id="main-nav-links">
              <a class="col" href="#about">
                <i class="lni lni-postcard"></i> <span>关于我</span>
              </a>
              <a class="col" href="#skills">
                <i class="lni lni-brush"></i> <span>技能</span>
              </a>
              <a class="col" href="#education">
                <i class="lni lni-graduation"></i> <span>教育方面</span>
              </a>
              <a class="col" href="#experience">
                <i class="lni lni-network"></i> <span>个人经历</span>
              </a>
              <a class="col" @click="jump(user.id)">
                <i class="lni lni-briefcase"></i> <span>项目经历</span>
              </a>
              <a class="col" href="#blog">
                <i class="lni lni-write"></i> <span>Blog</span>
              </a>
              <a class="col" href="#portfolio">
                <i class="lni lni-pallet"></i> <span>生活</span>
              </a>
              <a class="col" href="#clients">
                <i class="lni lni-consulting"></i> <span>其他站点</span>
              </a>
              <a class="col" href="#testimonials">
                <i class="lni lni-quotation"></i> <span>留言板</span>
              </a>

              <a class="col" href="#contact">
                <i class="lni lni-envelope"></i> <span>与我联系</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </main>
  <aside id="know-more-section" class="flex-center">
    <h1 class="know-more-heading">小刘小刘穷的发愁</h1>
    <div id="video-body">
      <div class="ytd-container">
        <div class="actions">
          <img
            src="https://liuzhengxing.oss-cn-hangzhou.aliyuncs.com/images/mianshi.jpg"
            alt=""
          />
        </div>
      </div>
    </div>
  </aside>
  <aside ref="splash" id="splash-screen" class="flex-center">
    <img src="@/assets/img/loader/loader.svg" alt="Splash screen loader" />
    <span>Loading ...</span>
  </aside>
</template>

<script>
import { message } from "ant-design-vue";
import { reactive, toRefs, ref, onMounted } from "vue";
import { getById } from "@/api/user";
import { getSkillByUserId } from "@/api/skill";
import { getWorkByUserId } from "@/api/work";
import { getEduByUserId } from "@/api/edu";
import { useRouter, useRoute } from "vue-router";
import * as comment from "@/api/comment";

export default {
  created() {
    //延时动画
    setTimeout(() => {
      this.$refs.splash.style.opacity = "0";
      this.$refs.splash.style.display = "none";
    }, 1000);
  },
  async mounted() {
    this.initMethod();
    await this.initData();
    this.typed();
    await this.commentList();
    // console.log(import.meta.env.VITE_SOME_KEY);
  },

  setup() {
    const route = useRoute();
    const router = useRouter();

    const initMethod = () => {
      //窗口方法缩小
      const main = document.querySelector("#main-container");
      for (const item of main.children) {
        const sizeBtn = item.querySelector(".window-expand-btn");
        sizeBtn.addEventListener("click", () => {
          if (main.className === "expanded") {
            main.className = "";
            item.classList.remove("window-expanded");
            sizeBtn.classList.remove("window-minimize-btn");
          } else {
            main.className = "expanded";
            item.classList.add("window-expanded");
            sizeBtn.classList.add("window-minimize-btn");
          }
        });
      }
      //三杠
      const menu = document.querySelector(".float-right");
      const aside = document.querySelector("#know-more-section");
      const i = menu.querySelector("i");
      menu.addEventListener("click", () => {
        if (aside.classList.contains("active")) {
          aside.classList.remove("active");

          i.classList.replace("lni-close", "lni-menu");
        } else {
          aside.classList.add("active");
          i.classList.replace("lni-menu", "lni-close");
        }
      });
    };
    /**
     * 初始化数据
     */
    const initData = async () => {
      const userId = route.params.id;
      if (!userId) {
        return;
      }
      const userInfo = await getById(userId);
      const skills = await getSkillByUserId(userId);
      const works = await getWorkByUserId(userId);
      const edu = await getEduByUserId(userId);
      if (userInfo && userInfo.data) {
        state.user = userInfo.data;
      }
      state.skills = skills.data[0].keywords.split(" ");
      state.works = works.data;
      state.edus = edu.data;
    };

    const typed = () => {
      let index = 0;
      const timer = setInterval(() => {
        state.sig.push(state.user.signature.split("")[index]);
        if (index === state.user.signature.length - 1) {
          clearInterval(timer);
        }
        index++;
      }, 200);
    };
    const jump = (id) => {
      router.push(`/projects/${id}`);
    };
    /**
     * 发送信息
     */
    const sendMsg = async () => {
      if (state.name.trim() === "" || state.msg.trim() === "") {
        message.warning("请输入完整信息！");
        return;
      }
      message.loading("发送中..");
      const response = await fetch(
        `http://106.75.225.76:8085/email/send?name=${state.name}&msg=${state.msg}`
      );
      if (response && response.status === 200) {
        const result = await response.json();
        // console.log(result);
        message.destroy();
        if (result.code === "200") {
          message.success("发送成功");
          state.name = "";
          state.msg = "";
        } else {
          message.error("发送失败");
        }
      }
    };
    /**
     * 评论
     */
    const sendComment = async () => {
      if (
        state.commentObj.name.trim() === "" ||
        state.commentObj.content.trim() === ""
      ) {
        message.warning("表单不能为空！");
        return;
      }
      const result = await comment.save(state.commentObj);
      console.log(result);
      if (result && result.data) {
        message.success("发表成功");
        // alert(times);
        state.comments.unshift({
          ...state.commentObj,
          gmtCreated: new Date().toLocaleString("ja").replaceAll("/", "-"),
        });
        state.commentObj.name = "";
        state.commentObj.content = "";
      }
    };
    const commentList = async () => {
      const result = await comment.list();
      console.log(result);
      if (result && result.data) {
        state.comments = result.data;
      }
    };
    const state = reactive({
      user: {},
      name: "",
      msg: "",
      commentObj: {
        name: "",
        content: "",
      },
      comments: [],
      skills: [],
      works: [],
      edus: [],
      sig: [],
      initData,
      initMethod,
      jump,
      typed,
      sendMsg,
      sendComment,
      commentList,
    });
    return toRefs(state);
  },
};
</script>

<style lang="scss" >
// @import url("../../assets/css/common.css");
// @import url("../../assets/css/main.css");
.ytd-container {
  position: relative;
  .actions {
    z-index: 100;
    text-align: center;
    img {
      width: 100%;
      object-fit: contain;
    }
  }
}
.comment {
  width: 100%;
  padding: 4%;
  .post-com {
    width: 100%;
    .form {
      // padding: 10px;
      .form-item {
        text-align: center;
        position: relative;
        input,
        textarea {
          // background: #32353a;
          border: 0;
          outline: 0;
          color: #999;
          font-size: 13px;
          height: 44px;
          max-width: 100%;
          width: 100%;
          margin-bottom: 30px;
          padding: 10px;
          // border: 1px solid rgb(205, 205, 205);
          box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 10px;
        }
        textarea {
          height: 110px !important;
        }
        .btn {
          position: absolute;
          top: 0;
          right: 0px;
          border: 0;
          outline: 0;
          color: #fff;
          height: 40px;
          background: #50a1ff;
          width: 150px;
        }
      }
    }
  }
  .content {
    margin-top: 70px;
    .content-item {
      position: relative;
      border-top: 1px dashed rgb(192, 192, 192);
      padding: 15px;
      margin: 10px 0;
      &:last-child {
        padding-bottom: 25px;
        border-bottom: 1px dashed rgb(193, 193, 193);
      }
      .title {
        display: flex;
        align-items: center;
        img {
          width: 30px;
          height: 30px;
          border-radius: 50%;
          margin-right: 15px;
        }
        span {
          font-weight: 500;
          font-size: 16px;
          color: #50a1ff;
        }
      }
      .text {
        margin: 15px 0;
        color: #3c4248;
        font-size: 13px;
        padding-left: 45px;
      }
      .time {
        position: absolute;
        right: 0;
        font-size: 12px;
        color: #999;
      }
    }
  }
}
.send-msg {
  position: relative;
  .input-item {
    input,
    textarea {
      // background: #32353a;
      border: 0;
      outline: 0;
      color: #999;
      font-size: 13px;
      height: 44px;
      max-width: 100%;
      width: 100%;
      margin-bottom: 30px;
      padding: 10px;
      // border: 1px solid rgb(205, 205, 205);
      box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 10px;
    }
  }
  textarea {
    height: 100px !important;
  }
  .send-btn {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    background: #50a1ff;
    color: #fff !important;
    padding: 12px 20px;
    display: inline-block;
    margin-bottom: 30px;
    cursor: pointer;
  }
}
.sig {
  text-align: center;
  font-size: 10px;
  line-height: 16px;
  padding: 5px 20px;
  margin-bottom: 10px;
}
#splash-screen {
  transition: all 2s ease-in-out;
  opacity: 1;
}
// .tips {
//   display: none;
// }
// #my-photo:hover {
//   // animation: dou 1s ease-in-out infinite;
//   transform: rotate(360deg);
//   // transform: rotate(-45deg);
//   transition: all 0.5s;
// }
// #my-photo:hover .tips {
//   display: block;
// }
// #my-photo:hover .top {
//   display: none;
// }
.education:hover {
  box-shadow: 2px 2px 4px 4px rgb(224, 224, 224),
    -2px -2px 4px 4px rgb(221, 221, 221);
}
body {
  // background-color: #000 !important;
  background-color: #202c63 !important;
}
.header-box {
  display: flex;
  .text {
    margin-left: 20px;
  }
}
.experience {
  position: relative;
  &:hover .to-project {
    opacity: 1;
  }
  .to-project {
    opacity: 0;
    padding: 0 20px;
    height: 100%;
    color: white;
    background: rgb(74, 168, 255);
    right: 0px;
    top: 0;
    align-items: center;
    position: absolute;
    display: flex;
    cursor: pointer;
    transition: all 0.5s ease-in;

    span {
      margin-right: 5px;
    }
    svg {
      animation: leftToRight 1s linear infinite;
    }
  }
}
@keyframes leftToRight {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(15px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes dou {
  0% {
    transform: rotate(30deg);
  }
  50% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(30deg);
  }
}
</style>
